<template>
    <div>
        <el-row class="wh header">
            <h2><i class="iconfont iconfeiji"></i>国内机票</h2>
        </el-row>
        <el-row class="wh search-box" type="flex" justify="space-between">
            <el-row class="search">
                <!-- 同页面切换 尽量使用tab切换 -->
                <el-row class="trip">
                    <el-row class="title" type="flex">
                        <el-col :span="12" class="title-item trip-dan"><span><i class="iconfont icondancheng"></i>单程</span></el-col>
                        <el-col :span="12" class="title-item trip-shuang"><span @click="openTips"><i class="iconfont iconshuangxiang"></i>往返</span></el-col>
                    </el-row>
                    <el-row class="trip-box">
                        <SearchForm/>
                    </el-row>
                </el-row>
            </el-row>
            <el-row class="banner">
                <img src="/images/pic_sale.jpeg" alt="">
            </el-row>
        </el-row>
        <el-row class="wh tips">
            <el-col :span="8" class="tips_col"><i class="iconfont iconweibiaoti-_huabanfuben"></i>100%航协认证</el-col>
            <el-col :span="8" class="tips_col"><i class="iconfont iconbaozheng"></i>出行保证</el-col>
            <el-col :span="8" class="tips_col"><i class="iconfont icondianhua"></i>7x24小时服务</el-col>
        </el-row>
        <el-row class="wh sale">
            <h2><i class="iconfont icontejiajipiao"></i>特价机票</h2>
        </el-row>
        <el-row class="wh sale_product">
            <el-col :span="6" v-for="(item,index) in saleList" :key="index">
                <nuxt-link :to="`/ticket/journey?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`">
                    <el-row class="sale-row">
                        <img :src="$axios.defaults.baseURL + item.cover" alt=""/>
                        <span>
                            <em>{{item.departCity}}-{{item.destCity}}</em>
                            <b>￥{{item.price}}</b>
                        </span>
                    </el-row>
                </nuxt-link>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SearchForm from '@/components/ticket/SearchForm'
export default {
    data(){
        return{
            saleList:[]
        }
    },
    components:{
        SearchForm
    },
    methods:{
        getSale(){
            this.$axios({
                url:'/airs/sale'
            }).then(res => {
                this.saleList = res.data.data;
            })
        },
        openTips(){
            this.$alert('目前暂不支持往返，请使用单程选票！', '提示', {
                confirmButtonText: '确定',
                type: 'warning'
            });
        }
    },
    mounted(){
       this.getSale();
    }

}
</script>

<style lang="less" scoped>
.wh{
   width:1000px;
   margin:auto;
}
.header{
   height:57px;
   line-height: 57px;
    h2{
        font-size: 20px;
        color: #FFA000;
        font-weight: 400;
        .iconfeiji{
            margin-right: 6px;
            font-size: 20px;
            color: #FFA000;
        }
    }
}
.search-box{
    height: 350px;
    margin-bottom: 18px;
}
.search{
    width: 360px;
    height:100%;
    background-color: #fff;
    border:1px solid #DDDDDD;
    border-top: 0;
    .trip{
        .title{
            height: 50px;
            text-align: center;
            cursor: pointer;
            .title-item{
                flex:50%;
                box-sizing: border-box;
                line-height: 50px;
                font-size: 16px;
                color: #000000;
                .iconfont{
                    margin-right: 6px;
                }
            }
            .trip-dan{
                border-top: 3px solid #FFA000;
            }
            .trip-shuang{
                background-color: #EEEEEE;
            }
        }
        .trip-box{
            

        }
    }
}
.banner{
    width: 620px;
    height:100%;
    img{
        width:100%;
        height:100%;
    }
}
.tips{
    height: 58px;
    line-height: 38px;
    box-sizing: border-box;
    padding:10px 0;
    border:1px solid #DDDDDD;
    .tips_col{
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        color: #000;
        border-right: 1px solid #DDDDDD;
        &:last-child{
            border-right:0;
        }
        &:nth-child(2n){
            i{
               color: #008000 !important;
            }
        }
    }
    i{
        font-size: 30px;
        color: rgb(64, 158, 255);
        vertical-align: middle;
        margin-right: 6px;
    }
}
.sale{
    height:57px;
    line-height: 57px;
    h2{
        font-size: 20px;
        color: #00A0FF;
        font-weight: 400;
        .icontejiajipiao{
            margin-right: 6px;
            font-size: 20px;
            color: #00A0FF;
        }
    }

}
.sale_product{
    box-sizing: border-box;
    height: 182px;
    padding:20px;
    border:1px solid #ddd;
    text-align:center;
    margin-bottom: 50px;
    .sale-row{
        position: relative; 
        width: 226px;
        height: 140px;
        img{
            width: 100%;
            height: 100%;
        }
        span{
            box-sizing: border-box;
            position: absolute;
            display: flex;
            justify-content: space-between;
            left:0;
            bottom:0;
            width: 226px;
            padding:8px 16px;
            background: rgba(0,0,0,.5);
            em{
                font-style: normal;
                color: #fff;
                font-size: 14px;
            }
            b{
                color: #fff;
                font-size: 16px;
            }
        }
    }
}


</style>